<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(link)"/>
<style>
    .home-container {
        width: 600px;
        margin: 0 auto;
        margin-top:100px;
        position: relative;
    }
</style>
<body>
    <div id="wrapper" v-cloak>
            <div class="home-container">
                <template>
                    <tabs>
                        <tab-pane @click="tab(0)" icon="md-build" label="文档上传"/>
                        <template>
                            <Upload
                                    multiple
                                    type="drag"
                                    action="/document/upload"
                                    :on-success="handleSuccess"
                                    :format="['doc','pdf','xls','xlsx']"
                                    :max-size="2048">
                                <div style="padding: 20px 0">
                                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                    <p>点击或将文件拖拽到这里上传</p>
                                </div>
                            </Upload>
                        </template>
                        </tab-pane>
                    </tabs>
                    <div v-show="keyShow">
                        <i-button type="info" @click="download('doc')">下载文档</i-button>
                        <i-button type="success" @click="download('pdf')">生成 pdf</i-button>
                        <i-button type="error" @click="preview">在线预览</i-button>
                        <i-button type="error" @click="previewDoc">在线预览</i-button>
                    </div>
                </template>
            </div>
    </div>
    <div th:replace="common/foot :: foot(clipboard)"></div>
    <script>

    new ClipboardJS('.btn');
    layui.use(["okUtils", "okLayer"], function () {
         var okUtils = layui.okUtils;
         var okLayer = layui.okLayer;
         var $ = layui.jquery;
         var vm = new Vue({
	    	el : '#wrapper',
	    	data:{
	    	    keyShow:false,
	    	    filePath:''
	    	},
            methods : {
                handleSuccess:function(response, file, fileList){
                    if(response.code==0){
                        vm.keyShow = true;
                        vm.filePath = response.msg;
                    }
                },
                download:function(type){
                    var url = vm.filePath;
                    $("<form method='get'  action='"+url+"'></form>")
                    .appendTo('body')
                    .submit()
                    .remove();
                },
                preview:function(){
                    var url = vm.filePath.replace(/.[^/.]+$/, "")+".pdf";
                    okUtils.dialogOpen({
                        title: '预览',
                        url: url,
                        scroll : true,
                        width: '90%',
                        height: '95%',
                        btn: []
                    });
                },
                previewDoc:function(){
                    //外网环境
                    var url = "https://view.officeapps.live.com/op/view.aspx?src="+vm.filePath;
                    okUtils.dialogOpen({
                        title: '',
                        url: url,
                        scroll : true,
                        width: '90%',
                        height: '95%',
                        btn: []
                    });
                },
                copy:function(){
                    this.$Notice.success({
                        title: '复制成功',
                        desc:'小伙伴，赶紧尝试一下吧'
                    });
                },
                tab:function(code){

                }
            },
            created : function() {

	    	}
         });
    });
    </script>
</body>
</html>
